<template>
    <div class="container">
        <!-- 鼠标悬浮“用户名上”弹窗 -->
        <el-popover ref="popover" placement="bottom" width="150px" trigger="hover">
            <i class="fa fa-key" style="cursor: pointer;text-align: center;width: 100%;padding-bottom: 10px;"
                @click="modifyPassword()">
                修改密码 </i>
            <i class="fa fa-sign-out" style="cursor: pointer;text-align: center;width: 100%" @click="logout()">
                退出登陆 </i>
        </el-popover>
        <!--鼠标悬浮“用户名上”弹窗 end -->

        <!-- 用户名 -->
        <div class="name" v-popover:popover>{{ name }}</div>
        <!-- 用户名 end -->

        <!-- 修改密码表单 -->
        <PasswordEditor ref="PasswordEditor" />
        <!-- 修改密码表单 end-->
    </div>
</template>

<script>
import { systemApi } from "../../api/api"
import PasswordEditor from "../sys/PasswordEditor";

export default {
    components: {
        PasswordEditor
    },
    data() {
        return {
            name: ""
        }
    },
    created() {
        this.name = this.$store.state.user;
    },
    methods: {
        //用户点击退出按钮主动退出
        logout() {
            //发送用户退出事件给上层组件,用于关闭websocket连接
            this.$emit('logout')
            systemApi.logout();
        },
        modifyPassword() {
            this.$refs['PasswordEditor']
                .setData('form', {})
                .setData("dialogFormVisible", true);
        }
    }
}

</script>

<style lang="scss" scoped>
.container {
    &:hover {
        cursor: pointer
    }
}
</style>